
<script>
import { getInfo, doUpdate, doAdd } from '@/api/alarm/statistics'
import { eqpnamelist } from '@/api/equipment/eqpbase'
export default {
  name: 'StatisticsForm',
  data() {
    return {
      dialogVisible: false,
      title: '',
      searchForm: {
        status: 1
      },
      selectList: {},
      rules: {
        eqpNames: [{ required: true, message: this.$t('EqpIsRequired'), trigger: 'change' }],
        alarmId: [{ required: true, message: this.$t('AlarmCodeIsRequired'), trigger: 'blur' }],
        interval: [{ required: true, message: this.$t('AlarmIntervalIsRequired'), trigger: 'blur' }]
      }
    }
  },
  methods: {
    doSave() {
      this.$refs['dataForm'].$refs['dynForm'].validate((valid) => {
        if (valid) {
          if (this.searchForm.id) {
            doUpdate(this.$clearNull(this.searchForm)).then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          } else {
            doAdd(this.$clearNull(this.searchForm)).then(res => {
              this.$betterTips(res, this.handleClose, this.handleUpdate)
            })
          }
        }
      })
    },
    handleOpen(row) {
      if (row && row.id) {
        getInfo({ id: row.id }).then(res => {
          this.searchForm = res.data
          this.title = this.$t('modify')
        })
      } else {
        this.title = this.$t('add')
      }
      this.dialogVisible = true
      this.getEqpNameList()
      this.$nextTick(() => {
        this.$refs['dataForm'].$refs['dynForm'].clearValidate()
      })
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    handleUpdate() {
      this.$emit('initList')
    },
    // 获取设备名称
    async getEqpNameList() {
      const res = await eqpnamelist()
      this.$set(this.selectList, 'eqpNames', res.data)
    }
  },
  render(h) {
    const searchTags = [
      { label: this.$t('eqpId'), prop: 'eqpNames', tag: 'DynSelect', multiple: true, style: { width: '100%' }},
      { label: this.$t('AlarmCode'), prop: 'alarmId', tag: 'DynInput', show_word_limit: true, maxlength: 30 },
      { label: this.$t('AlarmInterval'), prop: 'interval', tag: 'DynInput', event: (value) => {
        this.searchForm.interval = value.replace(/[^\d]/g, '')
      } },
      { label: this.$t('remark'), prop: 'remark', tag: 'DynTextarea', row: 3, show_word_limit: true, maxlength: 200 },
      { label: this.$t('status'), prop: 'status', tag: 'DynSwitch' }
    ]
    return (
      <el-dialog
        visible={this.dialogVisible} {...{ on: 'update:visible' }}
        before-close={this.handleClose}
        close-on-click-modal={false}
        title={this.title}
        width='600px'>
        <dynForm
          isInline={false}
          labelWidth='200px'
          ref='dataForm'
          info-form={this.searchForm}
          search-tags={searchTags}
          select-list={this.selectList}
          rules={this.rules}/>
        <span slot='footer'>
          <el-button size='small' icon='el-icon-circle-close' on-click={this.handleClose}>
            {this.$t('cancel')}
          </el-button>
          <el-button
            v-btnThrottle={this.doSave}
            type='primary'
            icon='el-icon-receiving'
            size='small'
          >{this.$t('save') }</el-button>
        </span>
      </el-dialog>
    )
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  width: 100%;
}
</style>
